CreateProject · Test Scenarios
+ Playwright + AI Testing Guide

01บทนำ · About This Guide

Test scope · deliverables · references

เอกสารนี้เป็น Test Documentation ครบวงจรสำหรับหน้าจอ CreateProject Web v14.0 ประกอบด้วย:

• Test Scenarios · 12 test areas · ครอบคลุมทุก workflow ของ 5-step wizard
• Test Cases · 55+ cases · Positive / Negative / Boundary / UI / Accessibility
• Playwright Automation Guide · Setup · Page Object Model · Sample scripts
• AI Testing Tools Comparison · เปรียบเทียบเครื่องมือ AI testing ปี 2025 · แนะนำที่ดีที่สุด

02Overview หน้าจอ · Screen Structure

2 main views + 5-step wizard + confirm popups

🗺️ Screen Map

📋 5-Step Wizard

🎨 UI Components

• AppShell · Sidebar + Topbar + Breadcrumb · Language toggle · User profile
• Cp Back Button · Circular ← ก่อน title (v13.0+)
• Cp Stepper · Left vertical · click-to-jump navigation
• Cp Save Confirm · Summary popup (v14.0)
• Toast Notifications · Success · Error

03Test Strategy

Test types · priority · environment · risk-based approach

🎯 Test Types Covered

⚡ Priority Levels

🌐 Test Environments

• Local Dev: Chrome + Firefox · manual testing สำหรับ dev
• Staging: Chrome + Firefox + Safari + Edge · Playwright automated · nightly runs
• UAT: Real users + accessibility tools · Weekly
• Production: Smoke tests only · post-deploy

04Test Scenarios + Test Cases

12 areas · 55+ detailed test cases

4.1 · 📋 Project List View

4.2 · 📝 Step 01 · Project Details

4.3 · 🏗️ Step 02 · Sites/Zones

4.4 · 👥 Step 03 · Members

4.5 · 📎 Step 04 · Files

4.6 · 🏗️ Step 05 · WBS

4.7 · 💾 Save Confirm Popup (v14.0)

4.8 · ✏️ Edit Mode

4.9 · 🗑️ Delete Project

4.10 · 🌐 Language Toggle

4.11 · 📊 Excel Export/Import

4.12 · ♿ Accessibility

05Playwright Automation Guide

Setup · Page Object Model · Sample code · CI/CD

🚀 Setup

1. Install: npm init playwright@latest · เลือก TypeScript · Chromium+Firefox+WebKit
2. Structure: สร้างโฟลเดอร์ · tests/, pages/, fixtures/, data/
3. Config: แก้ playwright.config.ts · baseURL, retries, screenshot on failure, trace on retry
4. CI: เพิ่ม GitHub Action workflow · run tests on PR + nightly
5. Report: เปิด HTML report ด้วย npx playwright show-report

📁 Recommended Project Structure

treetests/
├── create-project/
│   ├── list.spec.ts
│   ├── step01-project.spec.ts
│   ├── step02-sites.spec.ts
│   ├── step03-members.spec.ts
│   ├── step04-files.spec.ts
│   ├── step05-wbs.spec.ts
│   ├── save-confirm.spec.ts
│   └── e2e-full-flow.spec.ts
pages/
├── CreateProjectPage.ts       # Page Object Model
├── ProjectListPage.ts
└── SaveConfirmModal.ts
fixtures/
├── auth.ts                    # Login fixture
└── test-data.ts               # Sample project data
data/
├── projects.json
└── wbs-templates.xlsx
playwright.config.ts

🎯 Page Object Model · CreateProjectPage.ts

TypeScriptimport { Page, Locator, expect } from '@playwright/test';

export class CreateProjectPage {
  readonly page: Page;
  readonly stepperItems: Locator;
  readonly btnNext: Locator;
  readonly btnBack: Locator;
  readonly btnCreate: Locator;
  readonly btnSave: Locator;

  constructor(page: Page) {
    this.page = page;
    this.stepperItems = page.locator('.cp-stepper .cp-step');
    this.btnNext = page.getByRole('button', { name: /ถัดไป|Next/ });
    this.btnBack = page.getByRole('button', { name: /ย้อนกลับ|Back/ });
    this.btnCreate = page.getByRole('button', { name: /สร้างโครงการ|Create Project/ });
    this.btnSave = page.getByRole('button', { name: /บันทึกการแก้ไข|Save Changes/ });
  }

  // Step 01 · Project Details
  async fillStep01(data: {
    codeMode?: 'auto' | 'manual';
    code?: string;
    name: string;
    type: string;
    client: string;
    value: number;
    startDate: string;
    endDate: string;
    description?: string;
  }) {
    const p = this.page;
    if (data.codeMode === 'manual') {
      await p.getByLabel('กำหนดเอง').click();
      await p.getByLabel(/รหัสโครงการ/).fill(data.code ?? '');
    }
    await p.getByLabel(/^ชื่อโครงการ/).fill(data.name);
    await p.getByLabel(/ประเภทโครงการ/).selectOption(data.type);
    await p.getByLabel(/เจ้าของโครงการ/).fill(data.client);
    await p.getByLabel(/มูลค่า/).fill(String(data.value));
    await p.getByLabel(/วันที่เริ่ม/).fill(data.startDate);
    await p.getByLabel(/วันที่สิ้นสุด/).fill(data.endDate);
    if (data.description) {
      await p.getByLabel(/รายละเอียด/).fill(data.description);
    }
  }

  // Step 02 · Add Site
  async addSite(site: { name: string; code: string; }) {
    await this.page.getByRole('button', { name: /เพิ่มไซต์/ }).click();
    const lastCard = this.page.locator('.cp-site-card').last();
    await lastCard.getByLabel(/ชื่อไซต์งาน/).fill(site.name);
    await lastCard.getByLabel(/รหัสไซต์/).fill(site.code);
  }

  async gotoStep(stepNum: number) {
    await this.stepperItems.nth(stepNum - 1).click();
  }

  async submitCreate() {
    await this.btnCreate.click();
    // Wait for confirm popup
    await this.page.getByRole('dialog').waitFor({ state: 'visible' });
  }
}

✅ Sample Test · E2E Full Flow

TypeScriptimport { test, expect } from '@playwright/test';
import { CreateProjectPage } from '../pages/CreateProjectPage';

test.describe('CreateProject · E2E', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/project/setup');
    await page.getByRole('button', { name: /สร้างโครงการใหม่/ }).click();
  });

  test('TC-40 · Create project · complete 5-step wizard', async ({ page }) => {
    const cp = new CreateProjectPage(page);

    // Step 01
    await cp.fillStep01({
      name: 'Tarnas Tower Phase 2',
      type: 'อาคารสำนักงาน',
      client: 'บ.ธาร์ณัส จำกัด',
      value: 820000000,
      startDate: '2026-08-01',
      endDate: '2028-12-31',
    });
    await cp.gotoStep(2);

    // Step 02 · Sites
    await cp.addSite({ name: 'อาคาร A', code: 'S-01' });
    await cp.addSite({ name: 'อาคาร B', code: 'S-02' });
    await cp.gotoStep(5);

    // Skip to submit
    await cp.submitCreate();

    // Verify Confirm Popup
    const dialog = page.getByRole('dialog');
    await expect(dialog).toContainText('ยืนยันการสร้างโครงการ');
    await expect(dialog).toContainText('Tarnas Tower Phase 2');
    await expect(dialog).toContainText('2 ไซต์');

    // Confirm
    await dialog.getByRole('button', { name: /ยืนยัน/ }).click();

    // Verify redirect + toast
    await expect(page.getByRole('status')).toContainText(/สร้างโครงการ.*เรียบร้อย/);
    await expect(page).toHaveURL(/project\/setup$/);
  });

  test('TC-12 · Date validation · start > end shows error', async ({ page }) => {
    const cp = new CreateProjectPage(page);
    await page.getByLabel(/วันที่เริ่ม/).fill('2027-01-01');
    await page.getByLabel(/วันที่สิ้นสุด/).fill('2026-01-01');
    await expect(page.getByText('วันเริ่มต้องมาก่อนวันสิ้นสุด')).toBeVisible();
  });

  test('TC-51 · Language toggle · TH → EN', async ({ page }) => {
    await expect(page.getByText('ข้อมูลโครงการ')).toBeVisible();
    await page.getByRole('button', { name: /English/ }).click();
    await expect(page.getByText('Project Details')).toBeVisible();
  });
});

⚙️ playwright.config.ts

TypeScriptimport { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 2 : undefined,
  reporter: [['html'], ['list'], ['junit', { outputFile: 'results.xml' }]],
  use: {
    baseURL: process.env.BASE_URL ?? 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    locale: 'th-TH',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
  ],
});

06AI Testing Tools · Comparison 2025

8 tools compared · features · pricing · best fit for ConstructQ

📊 Comparison Matrix

07Recommendation for ConstructQ

Best combination for Thai construction QC SaaS

💡 ทำไมเลือกชุดนี้?

1. Playwright เป็น open-source · ฟรี · maintain โดย Microsoft · community ใหญ่ · เร็วที่สุดใน 2025
2. Cursor IDE ให้ AI ช่วยเขียนโค้ด · Composer generate ทั้ง test file ได้ · ประหยัดเวลา 60-70%
3. Playwright MCP (Claude) · AI ควบคุม browser ได้ · generate test จาก scenario ภาษาไทย
4. Applitools สำหรับ visual regression · จับ UI bug ที่ Playwright plain ไม่เห็น (color · alignment)
5. Total cost: Playwright ฟรี + Cursor $20 + Claude $20 + Applitools $200/mo = ~$240/mo · เทียบกับ Testim/Mabl หลักหมื่น

🚀 Suggested Implementation Roadmap

1. Week 1-2 · Setup: Playwright + Cursor + Claude Code · Config CI (GitHub Actions)
2. Week 3-4 · Foundation: Page Object Model · Auth fixture · CreateProject POM · run P1 tests
3. Week 5-6 · Coverage: เพิ่ม test P2 · integrate Applitools · visual baselines
4. Week 7-8 · CI/CD: Parallel runs · report portal · Slack notifications
5. Ongoing: AI generate test จาก scenarios · Claude MCP for exploratory testing · Weekly report

🎓 Skills to Build

• TypeScript · basic to intermediate · type safety สำคัญ
• Playwright API · locators · assertions · fixtures · POM pattern
• Claude/AI Prompting · เขียน prompt ให้ AI generate test cases ที่ดี
• Git + GitHub Actions · workflow · secrets · caching
• Test data management · Faker · seed factories

08Appendix

📌 Version History

• ConstructQ_CreateProject_v14.0.html · 30 มิ.ย. 2569 · Confirm popup added
• เอกสารนี้ v1.0 · 9 ก.ค. 2569 · Initial release · 57 test cases + Playwright + AI tools

🔗 References

• Playwright Docs: https://playwright.dev
• Playwright MCP: https://github.com/microsoft/playwright-mcp
• Cursor IDE: https://cursor.com
• Anthropic Claude: https://claude.ai
• Applitools Eyes: https://applitools.com
• WCAG 2.1 AA: https://www.w3.org/WAI/WCAG21/quickref

📊 Excel Companion

ดูไฟล์ ConstructQ_CreateProject_TestScenario_v1.0.xlsx คู่กัน · มี 4 sheets:

1. Summary: Test overview + statistics
2. Test Scenarios: 12 test areas overview
3. Test Cases: 57 detailed cases (TC ID · Scenario · Steps · Expected · Priority · Type · Status)
4. Playwright Coverage: test cases mapped กับ Playwright test files